import React, { useEffect, useRef, useState } from 'react'
import { ArrowLeft, OrdersO } from '@react-vant/icons';
import './motion.css'
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';
import { Popover, Space, Toast, Button } from 'react-vant';

export default function Steps() {
  const chartRef = useRef(null);
  const Navigate=useNavigate()
  const actions = [{ text: '日',path:'/steps' }, { text: '周',path:'/week' }, { text: '月',path:'/month' }];
  const select = (option) =>{
    Navigate(option.path)
  }
  const bar1=(option)=>{
    var myChart = echarts.init(chartRef.current);
    var option = {
      title: {
        text:"2024年6月22日",
        left: "center",
        textStyle: {
          color: "green",
        }
      },
      xAxis: {
        type: 'category',
        data: [20, , 21, , 22, , 23, , '24/06'],
        axisLabel: {
          formatter: function(value,index){
            const showIndexes = [0,2,4,6,8];
            return showIndexes.includes(index) ? `${value}` : '';
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [70, 45, 65, 63, 68, {value:61,itemStyle:{color:'white'}}, {value:49,itemStyle:{color:'white'}}, {value:57,itemStyle:{color:'white'}}, {value:60,itemStyle:{color:'white'}}],
          type: 'bar',
          barWidth: "20%",
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: "green"
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }

  useEffect(()=>{
    bar1()
  },[])
  return (
    <div className='steps'>
      <div className='motion-head'>
        <span className='motion-head-bor'><ArrowLeft onClick={()=>{Navigate('/target')}} /></span>
        <span>运动时间</span>
        <Popover
        actions={actions}
        onSelect={select}
        reference={<OrdersO className='motion-head-bor' />}
      />
      </div>
      <div ref={chartRef} className='motion-bar'></div>

    <div className='motion-mileage'>
        <div>
            <p style={{color:'#797979'}}>距离</p>
            <p>0.0 km</p>
        </div>
        <div style={{textAlign:"right"}}>
            <p style={{color:'#797979'}}>燃烧的卡路里</p>
            <p>0 kcal</p>
        </div>
    </div>

    <div className='motion-foot'>
        <button>编辑目标</button>
    </div>
    </div>
  )
}
